<template>
  <div class="recommend">
    <BorderTitle>推荐歌单</BorderTitle>
    <ul class="recommendList">
      <ImgListItem v-for="item in recommendList" :key="item.id" :item="item" ></ImgListItem>
    </ul>
    <router-view></router-view>
<Loading v-if="recommendList.length==0"></Loading>
    <BorderTitle>最新音乐</BorderTitle>
    <ul class="newMusic">
      <MusicList v-for="(item,index) in newMusicList" :key="item.id" :item="item" :index="index" @play="$emit('play',$event)" >{{index+1}}</MusicList>
    </ul>
<Loading v-if="newMusicList.length==0"></Loading>

    <!-- <BorderTitle>热门歌手</BorderTitle> -->

    <div class="b"></div>
  </div>
</template>
<script>
import BorderTitle from '@/components/BorderTitle'
import ImgListItem from '@/components/ImgListItem'
import MusicList from '@/components/MusicList'
import Loading from '@/components/Loading'
export default {
  data(){
    return {
      recommendList:[],
      newMusicList:[]
    }
  },
  name:'Recommend',
  components:{
    BorderTitle,
    ImgListItem,
    MusicList,
    Loading
  },
  created(){
    // this.$http.get('/personalized.json').then(d=>{
    this.$http.get('https://music.kele8.cn/personalized').then(d=>{
      
      // console.log(d)
      this.recommendList=d.data.result.slice(0,6)
      // this.recommendList=d.data.result
    });
    //  this.$http.get('/newsong.json').then(d=>{
     this.$http.get('https://music.kele8.cn/personalized/newsong').then(d=>{
      // console.log(d)
      this.newMusicList=d.data.result.slice(0,10)
    });
  },
 
}
</script>
<style lang="less" scoped>
.recommend{
  .b{
    height: 20px;
  }
.recommendList{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
}

</style>